<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件下载中心</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #6c5ce7;
            --secondary: #a29bfe;
            --accent: #fd79a8;
            --warning: #fdcb6e;
            --danger: #d63031;
            --light: #f8f9fa;
            --dark: #2d3436;
            --success: #00b894;
            --info: #0984e3;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: var(--light);
            overflow-x: hidden;
        }
        
        .container {
            width: 100%;
            max-width: 500px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
            z-index: 1;
            transition: all 0.3s ease;
        }
        
        .container::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            z-index: -1;
            animation: rotate 20s linear infinite;
        }
        
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            font-weight: 700;
            font-size: 28px;
            position: relative;
            display: inline-block;
        }
        
        h1::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 4px;
            background: var(--accent);
            border-radius: 2px;
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.5s ease;
        }
        
        h1:hover::after {
            transform: scaleX(1);
            transform-origin: left;
        }
        
        .step {
            display: none;
            animation: fadeIn 0.5s ease;
        }
        
        .step.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .input-group {
            margin-bottom: 25px;
            position: relative;
        }
        
        .input-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.9);
        }
        
        .input-group input {
            width: 100%;
            padding: 15px 20px;
            border: none;
            border-radius: 50px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            font-size: 16px;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
        }
        
        .input-group input:focus {
            outline: none;
            background: rgba(255, 255, 255, 0.3);
            box-shadow: 0 0 0 3px rgba(253, 121, 168, 0.3);
        }
        
        .input-group input::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }
        
        .btn {
            display: inline-block;
            padding: 15px 30px;
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            width: 100%;
            position: relative;
            overflow: hidden;
            margin-top: 10px;
        }
        
        .btn-primary {
            background: var(--primary);
            box-shadow: 0 5px 15px rgba(108, 92, 231, 0.4);
        }
        
        .btn-secondary {
            background: var(--secondary);
            box-shadow: 0 5px 15px rgba(162, 155, 254, 0.4);
        }
        
        .btn-accent {
            background: var(--accent);
            box-shadow: 0 5px 15px rgba(253, 121, 168, 0.4);
        }
        
        .btn-warning {
            background: var(--warning);
            box-shadow: 0 5px 15px rgba(253, 203, 110, 0.4);
            color: var(--dark);
        }
        
        .btn-danger {
            background: var(--danger);
            box-shadow: 0 5px 15px rgba(214, 48, 49, 0.4);
        }
        
        .btn-success {
            background: var(--success);
            box-shadow: 0 5px 15px rgba(0, 184, 148, 0.4);
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }
        
        .btn:active {
            transform: translateY(1px);
        }
        
        .btn:disabled {
            background: #b2bec3;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .btn::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transform: translateX(-100%);
            transition: transform 0.6s ease;
        }
        
        .btn:hover::after {
            transform: translateX(100%);
        }
        
        .file-info {
            margin-top: 30px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px;
            animation: fadeIn 0.5s ease;
        }
        
        .file-info h3 {
            margin-bottom: 15px;
            color: var(--accent);
            font-size: 20px;
        }
        
        .file-detail {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .file-detail:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .file-detail span:first-child {
            font-weight: 600;
            color: rgba(255, 255, 255, 0.8);
        }
        
        .file-detail span:last-child {
            color: white;
        }
        
        .progress-container {
            margin-top: 20px;
            display: none;
        }
        
        .progress-bar {
            height: 10px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 10px;
            position: relative;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--accent), var(--primary));
            border-radius: 5px;
            width: 0%;
            transition: width 0.3s ease;
        }
        
        .progress-text {
            text-align: center;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
        }
        
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
        }
        
        .particle {
            position: absolute;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            animation: float linear infinite;
        }
        
        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); opacity: 1; }
            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
        }
        
        .confetti {
            position: fixed;
            width: 10px;
            height: 10px;
            background: var(--accent);
            opacity: 0;
            z-index: 999;
            animation: confetti 3s ease-out;
        }
        
        @keyframes confetti {
            0% { transform: translateY(0) rotate(0deg); opacity: 1; }
            100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
        }
        
        .download-complete {
            text-align: center;
            margin-top: 20px;
            color: var(--success);
            font-weight: 600;
            display: none;
            animation: bounce 0.5s ease;
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-20px); }
            60% { transform: translateY(-10px); }
        }
        
        .file-icon {
            text-align: center;
            font-size: 60px;
            margin-bottom: 20px;
            color: var(--accent);
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        .modal {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            transform: translateY(20px);
            transition: all 0.3s ease;
        }
        
        .modal-overlay.active .modal {
            transform: translateY(0);
        }
        
        .modal-title {
            font-size: 22px;
            margin-bottom: 15px;
            color: white;
        }
        
        .modal-content {
            margin-bottom: 20px;
            color: rgba(255, 255, 255, 0.9);
        }
        
        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .modal-btn {
            padding: 10px 20px;
            border-radius: 50px;
            border: none;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .modal-btn-primary {
            background: var(--primary);
            color: white;
        }
        
        .modal-btn-secondary {
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }
        
        .status-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .status-ready {
            background: var(--success);
            color: white;
        }
        
        .status-processing {
            background: var(--warning);
            color: var(--dark);
        }
        
        .status-error {
            background: var(--danger);
            color: white;
        }
        
        .status-other {
            background: var(--info);
            color: white;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 24px;
            }
            
            .btn {
                padding: 12px 25px;
            }
            
            .file-icon {
                font-size: 50px;
            }
        }
        .footer-bottom {
            text-align: center;
            padding: 20px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
        }

        .footer-bottom p:first-child {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="particles" id="particles"></div>
    
    <!-- 自定义弹窗 -->
    <div class="modal-overlay" id="modalOverlay">
        <div class="modal">
            <h3 class="modal-title" id="modalTitle">提示</h3>
            <div class="modal-content" id="modalContent"></div>
            <div class="modal-footer">
                <button class="modal-btn modal-btn-primary" id="modalConfirm">确定</button>
            </div>
        </div>
    </div>
    
    <div class="container">
        <!-- 第一步：输入文件ID -->
        <div class="step active" id="step1">
            <div class="file-icon">
                🔍
            </div>
            <h1>文件下载</h1>
            
            <div class="input-group">
                <input type="text" id="fileId" placeholder="请输入文件编号">
            </div>
            
            <button class="btn btn-primary" id="fetchBtn">查询文件</button>
        </div>
        
        <!-- 第二步：显示文件信息 -->
        <div class="step" id="step2">
            <div class="file-icon" id="fileIcon">
                📁
            </div>
            <h1><span id="fileIdDisplay">-</span>：文件信息</h1>
            
            <div class="file-info">
                <div class="file-detail">
                    <span>状态:</span>
                    <span id="fileStatus">-</span>
                </div>
                <div class="file-detail">
                    <span>文件名:</span>
                    <span id="fileName">-</span>
                </div>
                <div class="file-detail">
                    <span>文件大小:</span>
                    <span id="fileSize">-</span>
                </div>
                <div class="file-detail">
                    <span>上传时间:</span>
                    <span id="uploadTime">-</span>
                </div>
                <div class="file-detail">
                    <span>下载次数:</span>
                    <span id="downloadCount">-</span>
                </div>
                
                <button class="btn btn-accent" id="downloadBtn">下载文件</button>
                <button class="btn btn-secondary" id="backBtn">返回</button>
            </div>
            
            <div class="progress-container" id="progressContainer">
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
                <div class="progress-text" id="progressText">准备下载...</div>
            </div>
            
            <div class="download-complete" id="downloadComplete">
                🎉 下载完成！ 🎉
            </div>
        </div>
    </div>
        <!-- 备案信息 -->
        <footer style="
            position: fixed;
            bottom: 10px;
            left: 0;
            right: 0;
            text-align: center;
            color: rgba(255,255,255,0.6);
            font-size: 12px;
            z-index: 100;
        ">
        
         
        <a href="https://beian.miit.gov.cn/" target="_blank" style="color: inherit; text-decoration: none;">
            鄂ICP备19024798号-1
        </a>
        &emsp;|&emsp;
        <a href="https://yzycoc.com/"  style="color: inherit; text-decoration: none;">
            Copyright © 2025 仓鼠工具 版权所有
        </a>
    </footer>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 创建粒子背景
            createParticles();
            
            // 从URL获取ID
            const urlParams = new URLSearchParams(window.location.search);
            const fileIdFromUrl = urlParams.get('id');
            if (fileIdFromUrl) {
                document.getElementById('fileId').value = fileIdFromUrl;
                const fileIdInput = document.getElementById('fileId');
                fileIdInput.value = fileIdFromUrl;
                
                // 自动触发查询（延迟500ms让UI有时间更新）
                setTimeout(() => {
                    const fetchBtn = document.getElementById('fetchBtn');
                    fetchBtn.click(); // 模拟点击查询按钮
                }, 100);
            }
            
            // 获取DOM元素
            const fetchBtn = document.getElementById('fetchBtn');
            const downloadBtn = document.getElementById('downloadBtn');
            const backBtn = document.getElementById('backBtn');
            const step1 = document.getElementById('step1');
            const step2 = document.getElementById('step2');
            const modalOverlay = document.getElementById('modalOverlay');
            const modalConfirm = document.getElementById('modalConfirm');
            const modalTitle = document.getElementById('modalTitle');
            const modalContent = document.getElementById('modalContent');
            
            // 当前文件信息
            let currentFileInfo = null;
            
            // 查询文件按钮点击事件
            fetchBtn.addEventListener('click', fetchFileInfo);
            
            // 下载按钮点击事件
            downloadBtn.addEventListener('click', checkFileBeforeDownload);
            
            // 返回按钮点击事件
            backBtn.addEventListener('click', () => {
                step1.classList.add('active');
                step2.classList.remove('active');
            });
            
            // 弹窗确认按钮
            modalConfirm.addEventListener('click', () => {
                modalOverlay.classList.remove('active');
            });
        });
        
        function createParticles() {
            const particlesContainer = document.getElementById('particles');
            const particleCount = window.innerWidth < 768 ? 30 : 50;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                
                // 随机大小
                const size = Math.random() * 5 + 2;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                // 随机位置
                particle.style.left = `${Math.random() * 100}%`;
                particle.style.top = `${Math.random() * 100}%`;
                
                // 随机透明度
                particle.style.opacity = Math.random() * 0.5 + 0.1;
                
                // 随机动画持续时间
                const duration = Math.random() * 20 + 10;
                particle.style.animationDuration = `${duration}s`;
                // 随机延迟
                particle.style.animationDelay = `${Math.random() * 5}s`;
                particlesContainer.appendChild(particle);
            }
        }
        
        function showModal(title, content) {
            const modalOverlay = document.getElementById('modalOverlay');
            const modalTitle = document.getElementById('modalTitle');
            const modalContent = document.getElementById('modalContent');
            
            modalTitle.textContent = title;
            modalContent.textContent = content;
            modalOverlay.classList.add('active');
        }
        
        function fetchFileInfo() {
            const fileId = document.getElementById('fileId').value.trim();
            if (!fileId) {
                showModal('错误', '请输入文件ID');
                return;
            }
            
            const fetchBtn = document.getElementById('fetchBtn');
            const originalText = fetchBtn.textContent;
            fetchBtn.textContent = '查询中...';
            fetchBtn.disabled = true;
            
            // 显示加载动画
            const fileIcon = document.querySelector('#step1 .file-icon');
            fileIcon.textContent = '⏳';
            
            fetch(`https://yzycoc.com/i/file/info/${fileId}`, {
                method: 'POST',
                headers: {
                    'Accept': '*/*',
                    'Connection': 'keep-alive'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                return response.json();
            })
            .then(data => {
                if (data.code === 200) {
                    currentFileInfo = data.data;
                    
                    // 检查文件是否存在
                    if (!currentFileInfo.exists) {
                        throw new Error('文件已不存在，无法下载');
                    }
                    
                    // 切换到第二步
                    document.getElementById('step1').classList.remove('active');
                    document.getElementById('step2').classList.add('active');
                    
                    // 显示文件信息
                    displayFileInfo();
                } else {
                    throw new Error(data.msg || '获取文件信息失败');
                }
            })
            .catch(error => {
                showModal('错误', error.message);
                fileIcon.textContent = '❌';
                setTimeout(() => {
                    fileIcon.textContent = '🔍';
                }, 2000);
            })
            .finally(() => {
                fetchBtn.textContent = originalText;
                fetchBtn.disabled = false;
            });
        }
        
        function displayFileInfo() {
            const fileIcon = document.getElementById('fileIcon');
            const fileInfo = currentFileInfo;
            
            // 根据文件类型显示不同的图标
            if (fileInfo.contentType.includes('excel') || fileInfo.contentType.includes('spreadsheet')) {
                fileIcon.textContent = '📄';
            } else if (fileInfo.contentType.includes('word') || fileInfo.contentType.includes('document')) {
                fileIcon.textContent = '📄';
            } else if (fileInfo.contentType.includes('pdf')) {
                fileIcon.textContent = '📕';
            } else if (fileInfo.contentType.includes('image')) {
                fileIcon.textContent = '🖼️';
            } else if (fileInfo.contentType.includes('video')) {
                fileIcon.textContent = '🎬';
            } else if (fileInfo.contentType.includes('audio')) {
                fileIcon.textContent = '🎵';
            } else if (fileInfo.contentType.includes('zip') || fileInfo.contentType.includes('compressed')) {
                fileIcon.textContent = '🗜️';
            } else {
                fileIcon.textContent = '📁';
            }
            
            // 填充文件信息
            document.getElementById('fileIdDisplay').textContent =  document.getElementById('fileId').value;
            
            // 状态显示
            const statusElement = document.getElementById('fileStatus');
            statusElement.textContent = '';
            const statusBadge = document.createElement('span');
            statusBadge.textContent = fileInfo.status;
            statusBadge.classList.add('status-badge');
            
            switch(fileInfo.status) {
                case 'ready':
                    statusBadge.classList.add('status-ready');
                    break;
                case 'processing':
                    statusBadge.classList.add('status-processing');
                    break;
                case 'error':
                    statusBadge.classList.add('status-error');
                    break;
                default:
                    statusBadge.classList.add('status-other');
            }
            
            statusElement.appendChild(statusBadge);
            
            document.getElementById('downloadCount').textContent = `${fileInfo.downloadCount}/5`;
            document.getElementById('fileName').textContent = fileInfo.fileName;
            document.getElementById('fileSize').textContent = formatFileSize(fileInfo.fileSize);
            document.getElementById('uploadTime').textContent = new Date(fileInfo.createdAt).toLocaleString();

            // 隐藏进度条和完成信息
            document.getElementById('progressContainer').style.display = 'none';
            document.getElementById('downloadComplete').style.display = 'none';
            
        }
         function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }
        function checkFileBeforeDownload() {
            const downloadBtn = document.getElementById('downloadBtn');
            const originalText = downloadBtn.textContent;
            downloadBtn.disabled = true;
            
            fetch(`https://yzycoc.com/i/file/info/${currentFileInfo.fileId || document.getElementById('fileId').value}`, {
                method: 'POST',
                headers: {
                    'Accept': '*/*',
                    'Connection': 'keep-alive'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                return response.json();
            })
            .then(data => {
                if (data.code === 200) {
                    // 检查下载次数
                    if (data.data.downloadCount >= 5) {
                        throw new Error('该文件已达到最大下载次数(5次)，无法继续下载，请重新生成');
                    }
                    
                    // 检查文件是否存在
                    if (!data.data.exists) {
                        throw new Error('文件已不存在，无法下载');
                    }
                    fetchFileInfo();
                    // 一切正常，开始下载
                    downloadFile();
                } else {
                    throw new Error(data.msg || '检查文件信息失败');
                }
            })
            .catch(error => {
                showModal('错误', error.message);
            })
            .finally(() => {
                downloadBtn.textContent = originalText;
                downloadBtn.disabled = false;
            });
        }
        
        function downloadFile() {
            const fileId = currentFileInfo.fileId || document.getElementById('fileId').value;
            const downloadBtn = document.getElementById('downloadBtn');
            const originalText = downloadBtn.textContent;
            downloadBtn.textContent = '准备下载...';
            downloadBtn.disabled = true;
            
            // 显示进度条
            const progressContainer = document.getElementById('progressContainer');
            const progressFill = document.getElementById('progressFill');
            const progressText = document.getElementById('progressText');
            progressContainer.style.display = 'block';
            progressFill.style.width = '0%';
            progressText.textContent = '准备下载...';
            
            // 隐藏完成信息
            document.getElementById('downloadComplete').style.display = 'none';
            
            // 更新文件图标
            const fileIcon = document.getElementById('fileIcon');
            fileIcon.textContent = '⏳';
            
            fetch(`https://yzycoc.com/i/file/download/${fileId}`, {
                method: 'GET',
                headers: {
                    'Accept': '*/*',
                    'Connection': 'keep-alive'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                
                const contentLength = parseInt(response.headers.get('Content-Length') || '0', 10);
                let loaded = 0;
                
                // 创建一个读取流
                const reader = response.body.getReader();
                const chunks = [];
                
                function read() {
                    return reader.read().then(({done, value}) => {
                        if (done) {
                            // 下载完成
                            return new Blob(chunks);
                        }
                        
                        chunks.push(value);
                        loaded += value.length;
                        
                        // 更新进度条
                        if (contentLength > 0) {
                            const percent = Math.round((loaded / contentLength) * 100);
                            progressFill.style.width = `${percent}%`;
                            progressText.textContent = `下载中... ${percent}%`;
                            
                            // 更新按钮文本
                            downloadBtn.textContent = `下载中 ${percent}%`;
                        }
                        
                        return read();
                    });
                }
                
                return read();
            })
            .then(blob => {
                // 下载完成
                progressFill.style.width = '100%';
                progressText.textContent = '下载完成！';
                downloadBtn.textContent = originalText;
                downloadBtn.disabled = false;
                
                // 显示完成动画
                fileIcon.textContent = '✅';
                document.getElementById('downloadComplete').style.display = 'block';
                
                // 创建彩带动画
                createConfetti();
                
                // 创建下载链接
                const fileName = currentFileInfo.fileName || 'download';
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = fileName;
                document.body.appendChild(a);
                a.click();
                
                // 清理
                window.URL.revokeObjectURL(url);
                document.body.removeChild(a);
                
                // 3秒后恢复图标
                setTimeout(() => {
                    fileIcon.textContent = '📁';
                }, 3000);
            })
            .catch(error => {
                showModal('下载错误', error.message);
                progressText.textContent = '下载失败';
                fileIcon.textContent = '❌';
                downloadBtn.textContent = originalText;
                downloadBtn.disabled = false;
                
                setTimeout(() => {
                    fileIcon.textContent = '📁';
                }, 2000);
            });
        }
        
        function createConfetti() {
            const colors = ['#fd79a8', '#6c5ce7', '#00b894', '#0984e3', '#fdcb6e'];
            
            for (let i = 0; i < 50; i++) {
                const confetti = document.createElement('div');
                confetti.classList.add('confetti');
                
                // 随机颜色
                const color = colors[Math.floor(Math.random() * colors.length)];
                confetti.style.background = color;
                
                // 随机大小
                const size = Math.random() * 10 + 5;
                confetti.style.width = `${size}px`;
                confetti.style.height = `${size}px`;
                
                // 随机形状
                if (Math.random() > 0.5) {
                    confetti.style.borderRadius = '50%';
                } else {
                    confetti.style.borderRadius = '0';
                }
                
                // 随机位置
                confetti.style.left = `${Math.random() * 100}%`;
                confetti.style.top = `${Math.random() * 100}%`;
                
                // 随机动画持续时间
                const duration = Math.random() * 2 + 1;
                confetti.style.animationDuration = `${duration}s`;
                
                document.body.appendChild(confetti);
                
                // 动画结束后移除元素
                setTimeout(() => {
                    confetti.remove();
                }, duration * 1000);
            }
        }
    </script>
</body>
</html>